<template>
    <div>
       <div class="back">
         <el-form :model="form" class="form" :rules="rules" ref="form">
            <p class="title">Welcome</p>
         <el-form-item prop="username">
        <el-input type="text" v-model="form.username" placeholder="请输入管理员账号"></el-input>
          </el-form-item>
       <el-form-item prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入管理员密码"></el-input>
       </el-form-item>
       <el-form-item>
        <el-button type="primary" style="width:100%;" @click="onSubmit">立即登录</el-button>
       </el-form-item>
     </el-form>
       </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form:{
                    username:'',
                    password:''
                },
                rules:{
                    username:[
                        {required:true,message:'请填写用户名',trigger:'blur'},
                        {pattern:/^\w{3,15}$/,message:'用户名长度在3~15位',trigger:'blur'}
                    ],
                    password:[
                       {required:true,message:'请输入登录密码',trigger:'blur'},
                       {pattern:/^\w{6,15}$/,message:'密码长度在6~15位',trigger:'blur'} 
                    ]
                }
            }
        },
        methods: {
            onSubmit() {
               this.$refs['form'].validate((valid) => {
               if (valid) {
                  this.$http.adminApi.login(this.form).then(res => {
                    console.log(res)
                    if(res.data.code == 1001){
                        this.$alert('账号或密码错误', '登录失败', {
                        confirmButtonText: '确定',
                        callback: action => {
                          this.form = {}
                    }
                    })
                    }else{
                        this.$store.commit('saveUserState',res.data.data)
                        this.$message({
                        message: '登录成功',
                        type: 'success'
                       });
                       this.$router.push('/')
                    }
                  })
             } else {
              this.$message({
              type: 'warning',
              message: '请输入登录信息'
             });
            }
         });   
       }
     },
   }
</script>

<style scoped>
 .back{
    height: 100vh;
    background-image: linear-gradient(125deg,#e14040,#b050cd,#4842c9,#34828d);
    background-size: 200%;
    animation: animate 8s infinite;
 }
 @keyframes animate{
    0%{
      background-position: 0% 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0% 50%;
    }
 }
 .form{
    width: 20%;
    display: block;
    position: absolute;
    top: 30%;
    left: 40%;
 }
 .form .title{
    color: white;
    font-size: 1.5em;
    text-align: center;
 }
.form .el-form-item__label{
  color:#fff;
 }
</style>